<template>
  <div class="search-box">
      <div class="left">
          <span class="iconfont icon-xiaoyuhao" @click="goLast"> </span>
        </div>
      <div class="right">
           <span class="iconfont icon-kefu"></span>
         <span class="iconfont icon-zhuanfa" @click="showShare = true"></span>
<van-share-sheet v-model="showShare" title="分享" :options="options" @select="onSelect"/>
           <span class="qiugou">求购</span>
      </div>
  </div>
  
</template>

<script>
import { Toast } from 'vant';
export default {
name:"DetailSearch",
data() {
    return {
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
    };
  }, 
methods:{
    goLast(){
    this.$router.go(-1)
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
}
}
</script>

<style scoped>
@import url(../../../assets/cao-iconfont/iconfont.css);
.search-box{
    display:flex;
    height: .4rem;
    width: 100%;
    /* background-color: skyblue; */
    line-height: .4rem;
}
.search-box .left{
    float: left;
    margin-left: .2rem;
}
.left .icon-xiaoyuhao{
    font-size: 18px;
    font-weight: bold;
}
.search-box .right{
    float: right;
    margin-left: 1.8rem;
}
.right span{
    margin-left: .2rem;
}
.right .icon-kefu{
    font-size: 18px;
    font-weight: bold;
}
.right .icon-zhuanfa{
    font-size: 20px;
    font-weight: bold;
}
.right .qiugou{
    font-size: 20px;
    font-weight: bold;
}
</style>